import React, { FC, useEffect, useState } from 'react';
import { Topic } from './topic';
import { Banner } from './banner';
import { TagCardList } from './tagCardList';
import { IResource } from '@/components';
import { getResources, SORT } from '@/services/resources';
import './index.less';

export const Home: FC = () => {
  const [latestResources, SetLatestResources] = useState<IResource[]>([]);
  const [recommendResources, setRecommendResources] = useState<IResource[]>([]);

  useEffect(() => {
    // request
    (async () => {
      const { data: recommendResources } = await getResources({ sort: SORT.RECOMMEND });
      setRecommendResources(recommendResources);
      const { data: latestResources } = await getResources();
      SetLatestResources(latestResources);
    })();
  }, []);

  return (
    <div className='home-page'>
      <Banner />
      <div className='content'>
        <TagCardList data={ [] } />
        <Topic title='推荐' data={ recommendResources } />
        <Topic title='最新资源' data={ latestResources } />
      </div>
    </div>
  );
};
